<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/ajax.js"></script>
    <script src="/html/js/layui.js"></script>
    <script src="/html/js/util.js"></script>
    <link rel="stylesheet" href="/html/js/css/layui.css" media="all">
    <title>主贴详情</title>
</head>
<script>

    let mainContentId;
    window.onload = function () {
        getUserMainContent();
    }

    //设置贴主发帖信息
    async function getUserMainContent() {
        mainContentId = getQuery("mcId");
        //获取主贴以及其下跟帖信息
        let params = {
            mainContentId
        }
        //获取主贴以及跟帖信息
        let result = await ajaxGet("/mainContent/findMCById", params);
        console.log(result);
        $("mainUsername").innerHTML = result.userBean.username;
        $("headImg").src = "/html/imgs/" + result.userBean.headImg + ".jpg";
        $("registerDate").innerHTML = result.userBean.registerDate;
        $("mcTitle").innerHTML = result.mcTitle;
        $("mainDateTime").innerHTML = result.mainDateTime;
        $("mcContent").value = result.mcContent;
        await generateSubContent(result);
    }

    //设置生成跟帖信息
    async function generateSubContent(result) {
        let subList = result.subContentBeanList;
        let str = "";
        for (let i = 0; i < subList.length; i++) {
            let sub = subList[i];
            str += "<div style=\"display: flex;justify-content: space-around\">";
            str += `<div class="layui-bg-cyan" style="width: 30%">
        <div style="margin-left: 50px">
            用户名 <span>${sub.userBean.username}</span><br>
            <hr>
            <img src="/html/imgs/${sub.userBean.headImg}.jpg" alt="" style="width: 50px;height: 50px"><br>
            注册时间 <span>${sub.userBean.registerDate}</span>
        </div>
    </div>
    <div class="layui-bg-blue" style="width: 70%">
        <div>
            主题 <span>${sub.scTitle}</span><br>
            发帖时间 <span>${sub.subDateTime}</span>
        </div>
        <div>
            <div class="layui-input-block layui-bg-gray">
                <textarea name="desc" class="layui-textarea layui-bg-gray" readonly >
                       ${sub.scContent}
                </textarea>
            </div>
        </div>
    </div>`;
            str += "</div>";
            // str += "<hr>";
        }
        $("subContents").innerHTML = str;
    }

    function add() {
        $("addSubs").style.visibility = "visible";
    }

    //回复新帖，需要当前登录的用户id和主贴id
    async function addSC() {
        let userBean = await ajaxGet("/user/getUserSession");
        let userId = userBean.userId;
        mainContentId = getQuery("mcId");
        let value1 = $("scTitle").value.trim();
        let value2 = $("scContent").value.trim();

        if (value1 == "" || value2 == "") {
            alert("不能发送空的内容");
            $("addSubs").style.visibility = "hidden";
            return;
        }
        let params = {
            userId: userId,
            mainContentId, mainContentId,
            scTitle: $("scTitle").value,
            scContent: $("scContent").value
        }

        let result = await ajaxGet("/subContent/addSC", params);

        if (result == "ok") {
            let result2 = await ajaxGet("/mainContent/findMCById", {mainContentId});
            await generateSubContent(result2);
            $("scTitle").value = "";
            $("scContent").value = "";
        } else {
            alert("服务器开小差了\n请稍后再试");
        }
        $("addSubs").style.visibility = "hidden";
    }

</script>


<body>
<div>
    <ul class="layui-nav" style="display: flex;justify-content: center">
        <li class="layui-nav-item layui-this"><a href="/html/theme/theme.html">返回首页</a></li>
        <li class="layui-nav-item"><a href="">登录</a></li>
        <li class="layui-nav-item"><a href="">注册</a></li>
        <li class="layui-nav-item"><a href="javascript:outAccount()">退出</a></li>
        <li class="layui-nav-item"><a href="">管理</a></li>
        <li class="layui-nav-item"><a href="">风格</a></li>
        <button type="button" class="layui-btn" onclick="add()">跟帖</button>
    </ul>

</div>
<!--楼主的主贴信息-->
<div style="display: flex;justify-content:space-around ">
    <!--楼主个人信息-->
    <div class="layui-bg-cyan" style="width: 30%">
        <div style="margin-left: 50px">
            用户名 <span id="mainUsername"></span><br>
            <hr>
            <img id="headImg" alt="" style="width: 50px;height: 50px"><br>
            注册时间 <span id="registerDate"></span>
        </div>
    </div>
    <!--楼主主贴标题与内容-->
    <div class="layui-bg-blue" style="width: 70%">
        <div id="">
            主题 <span id="mcTitle"></span><br>
            发帖时间 <span id="mainDateTime"></span>
        </div>
        <div>
            <div class="layui-input-block layui-bg-gray">
                <textarea name="desc" id="mcContent" class="layui-textarea layui-bg-gray" readonly></textarea>
            </div>
        </div>
    </div>
</div>
<hr>
<!--跟帖评论信息-->
<div id="subContents">

</div>

<!--位于最底部的发送跟帖栏-->
<div id="addSubs"
     style="position: relative;display: flex;justify-content: center;background-color: #92B8B1;visibility: hidden">
    <div id="addSub" style="position: fixed;bottom: 0px;width: 50%;background-color: #92B8B1">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block" style="margin-bottom: 50px;margin-top: 50px">
            <input type="text" name="title" id="scTitle" required lay-verify="required" placeholder="请输入标题"
                   autocomplete="off"
                   class="layui-input" style="width: 200px">
        </div>

        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea name="desc" style="width: 800px" id="scContent" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
        <div style="display: flex;justify-content: center">
            <button type="button" class="layui-btn" onclick="addSC()">发表跟帖</button>
        </div>
    </div>
</div>


</body>
</html>